<template>
  <div class="container">
    <div class="title">
      <div class="left">
        关键字<el-input
          placeholder="审批人"
          style="width: 230px; margin-left: 15px"
          v-model="user.keyword"
        ></el-input>
      </div>
      <div>
        <el-button @click="remove">清除</el-button>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </div>
    </div>
     <el-alert :title="`数据一共${counts}条`" type="info" show-icon></el-alert>
    <div class="table">
      <el-table :data="list" stripe style="width: 100%">
        <el-table-column prop="id" label="编号" width="280"> </el-table-column>
        <el-table-column prop="name" label="题型" width="120">
          <template slot-scope="{ row }">
            <span>{{ getDiffculty(row.questionType) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="题目编号" width="240">
            <template slot-scope="{ row }" >
            <div style="color:rgb(0,153,255)" v-for="(item,index) in row.questionIDs" :key="index" @click="chakan(row)">
              {{item.number}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="addTime" label="录入时间" width="170">
        </el-table-column>
        <el-table-column prop="totalSeconds" label="答题时间" width="130">
        </el-table-column>
        <el-table-column prop="accuracyRate" label="正确率(%)" width="130">
        </el-table-column>
        <el-table-column prop="userName" label="录入人" width="120">
        </el-table-column>
        <el-table-column label="操作" width="120">
          <template slot-scope="{row}">
               <el-button type="danger" icon="el-icon-delete" circle @click="removeAdd(row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="fenye">
          <el-pagination
              :total="counts"
              layout="prev,pager,next,sizes,jumper"
              @next-click="nextPage"
              @prev-click='prevPage'
              @size-change='change'
              @current-change='current'
            >
            </el-pagination>
      </div>

    </div>
    <el-dialog
        title="题目预览"
        :visible.sync="dialogVisible"
        width="80%"
        height='80%'
        v-if="dialogVisible"
      >
        <questionsCheck :data='row'/>
      </el-dialog>
  </div>
</template>

<script>
import { randoms,removeRandoms  } from "@/api/hmmm/questions.js";
import { questionType} from "@/api/hmmm/constants.js";
import questionsCheck from "@/module-hmmm/components/questions-check";
export default {
  created() {
    this.getDate();
  },
  components:{
     questionsCheck,
  },
  data() {
    return {
      user: {
        page: 1,
        pagesize: 10,
        keyword: "",
      },
      list: [],
      dialogVisible:false,
      row:{},
      counts: '',
    };
  },
  methods: {
    async getDate() {
      let res = await randoms(this.user);
      console.log(res);
      this.list = res.data.items;
      this.counts=res.data.counts
    },
    getDiffculty(item1) {
      questionType.forEach((item) => {
        if (item.value == item1) {
          item1 = item.label;
        }
      });
      return item1;
    },
     chakan(row){
      this.row=row
      this.dialogVisible=true
    },
    remove(){
      this.user.keyword=''
    },
    onSubmit(){
      this.getDate()
    },
    async removeAdd(row){
      await removeRandoms(row)
      this.getDate()
      this.$message({
            type: "success",
            message: "删除成功!",
          });
      },
    nextPage(){
      this.user.page++
      this.getDate()
    },
    prevPage(){
      this.user.page--
      this.getDate()
    },
    change(res){
      this.user.pagesize=res
      this.getDate()
    },
    current(res){
      this.user.page=res
      this.getDate()
    }
  },

};
</script>

<style scoped lang='less'>
.container {
  padding: 20px;
  background: #ffffff;
  height: 1300px;
  .title {
    height: 50px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .table {
    margin-top: 15px;
    height: 1300px;
  }
  .fenye{
    margin-top: 10px;
    display: flex;
    justify-content: end;
  }
}
</style>
